<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fancybox丰富的弹出层效果</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="fancybox.css" />
<style type="text/css">
.demo{padding:20px 100px}
.demo h4{line-height:30px}
.login{width:420px; height:200px; overflow:hidden}
#form{padding:10px}
.login h3{height:28px; line-height:28px; background:#d3d3d3; font-size:14px}
.login p{width:100%; line-height:26px; height:26px; padding:4px}
.login p label{float:left; width:90px; text-align:right}
.input{border:1px solid #ccc; padding:2px; width:160px}
.btn{border:none; width:68px; height:24px; background:url(images/btn.gif) no-repeat; cursor:pointer}
#login_msg{text-align:center}
.red{color:#f30}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.1.pack.js"></script>
<script type="text/javascript">
$(function(){
	$("#demo1").fancybox({
	    'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'titlePosition' : 'inside'
	});
	$("a[rel=group]").fancybox({
		'titlePosition' : 'over',
		'cyclic'        : true,
		'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
	});
	$("#showdiv").fancybox({'centerOnScroll':true});
	$("#ajax").fancybox({'width':400});
	$("#iframe").fancybox({
		'width':'75%',
		'height':'75%',
		'autoScale':false
	});
	$("#swf").fancybox({
		'autoScale':false
	});
	$("#modal").fancybox({
		'modal':false,
		'overlayShow':true,
		'hideOnOverlayClick':false,
		'hideOnContentClick':false,
		'enableEscapeButton':false,
		'showCloseButton':false,
		'centerOnScroll':true,
		'autoScale':false,
		'width':540,
		'height':360
	});
});
</script>
</head>
<body>

<div id="main">
  <div class="demo">
     <h4>Demo1：动态效果</h4>
     <p><a id="demo1" href="http://www.helloweba.com/demo/fancybox/images/example/b1.jpg" title="Hello,this is a fancybox."><img src="images/example/s1.gif" alt="" /></a></p>
  </div>
  <div class="demo">
     <h4>Demo2：图片集，支持键盘方向键</h4>
     <p>
     <a rel="group" href="http://www.helloweba.com/demo/fancybox/images/example/b1.jpg" title="图片标题"><img alt="" src="images/example/s1.gif" /></a>
     <a rel="group" href="http://www.helloweba.com/demo/fancybox/images/example/b2.jpg" title="图片标题"><img alt="" src="images/example/s2.gif" /></a>
     <a rel="group" href="http://www.helloweba.com/demo/fancybox/images/example/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/example/s3.gif" /></a>
     </p>
  </div>
  
  <div class="demo">
     <h4>Demo4：Ajax加载数据</h4>
     <p><a id="ajax" href="ajax.php?id=1" title="通过Ajax加载的内容">点击这里</a>通过Ajax加载数据</p>
  </div>
  <div class="demo">
     <h4>Demo5：加载Iframe</h4>
     <p><a id="iframe" class="iframe" href="http://www.baidu.com" title="加载一个框架页面">点击这里</a>加载嵌入百度首页</p>
  </div>
  <div class="demo">
     <h4>Demo6：加载FLASH影片</h4>
     <p><a id="swf" class="swf" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">点击这里</a>加载一个flash影片</p>
  </div>
</div>
</body>
</html>
